<template>
	<view>
		<u-navbar :background="background" :immersive="true" title=" " :border-bottom="false">
		</u-navbar>
		<u-swiper height="650" :autoplay="false" mode="number" img-mode="scaleToFill" indicator-pos="bottomRight" :list="info.images"></u-swiper>
		<view class="wrap">
			<view class="box">
				<view class="price n-flex-row n-justify-between n-align-center">
					<view class="qian">￥{{info.price}}</view>
					<view class="bi">{{info.integral}}{{ $t("糯米值") }}</view>
				</view>
				<view style="margin-top: 10rpx;font-size: 32rpx;">
					{{info.title}}
				</view>
			</view>
			<view class="row-list">
				 <view class="row">
					<view>{{ $t("运费") }}</view>
					<view class="hui" v-if="info.freight_value == 0 || info.goods_type==2">{{ $t("免运费") }}</view>
					<view class="hui" v-else>￥{{info.freight_value}}</view>
				 </view>
				 <view class="row" >
					<view>{{ $t("库存") }}</view>
					<view class="hui">{{info.stock}}</view>
				 </view>
				 <view class="row" >
				 	<view>{{ $t("服务保证") }}</view>
				 	<view class="hui">
						<view class="hui" v-if="info.goods_type==2">{{ $t("自动发卡商品 • 品质保证 • 无忧售后") }}</view>
						<view class="hui" v-else>{{ $t("七天内发货 • 品质保证 • 无忧售后") }}</view>
					</view>
				 </view>
				 <view class="row" @click="agreementShow = true">
				 	<view>{{ $t("购前须知") }}</view>
				 	<view class="hui">
				 		<view class="hui">{{ $t("不支持七天无理由退款") }}</view>
				 		<u-icon  size="24" name="arrow-right" color="#999"></u-icon>
					</view>
				 </view>
			</view>
		     <!--  -->
		
			<view class="info" >
				<view class="tit">
					<u-divider>{{ $t("商品详情") }}</u-divider>
				</view>
				<view class="goods_content">
					<u-parse :html="info.content"></u-parse>
				</view>
			</view>
		</view>

		<view class="gao"></view>

		<view class="btm">
			<view class="btmbox">
				<!-- #ifndef MP-WEIXIN -->
				<view class="kefu n-shrink-0" @click="lxkefu">
					<image src="../../../static/image/m_.png" mode=""></image>
					<view style="color: #666">{{ $t("客服") }}</view>
				</view>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<button class="kefu kefubtn n-shrink-0" open-type="contact">
					<image src="../../../static/image/m_.png" mode=""></image>
					<view style="color: #666">{{ $t("客服") }}</view>
				</button>
				<!-- #endif -->
				
				<view class="btns">
					<button class="huan" @click="show = true;isBuy = true" style="width: 100%;">{{ $t("立即购买") }}</button>
				</view>
			</view>
		</view>

		<u-popup v-model="show" @close="close" mode="bottom" :safe-area-inset-bottom="true">
			<view class="buybox">
				<view class="goods n-flex-row">
					<view class="picbox">
						<image :src="info.goodsPic" mode=""></image>
					</view>
					<view class="textbox">
						<view class="price">￥<text>{{info.price}}</text></view>
						<view class="price" style="color: #FC7802;"><text>{{info.integral}}</text>{{ $t('糯米值') }}</view>
						<view class="stock">{{ $t('库存') }}：{{info.stock}}{{ $t('件') }}</view>
					</view>
				</view>
				<!-- <view class="xinghao">
					<view class="tit">型号</view>
					<view class="xhList">
						<view class="list active">128GB</view>
						<view class="list">256GB</view>
						<view class="list">512GB</view>
					</view>
				</view> -->
				<view class="selectNum">
					<view class="">{{ $t("购买数量") }}</view>
					<u-number-box v-model="num" :min="1" :max="info.stock" @change="valChange"></u-number-box>
				</view>
				<button class="buy btn" v-if="isBuy" @click="buy">{{ $t("立即购买") }}</button>
			</view>
		</u-popup>
		<kefu :isShow='kfshow' ref="child" @cusEvent="hide"></kefu>
		 
		 
		 <u-popup v-model="agreementShow" @close="agreementShow = false" mode="center" :safe-area-inset-bottom="true">
			<view class="agreement-view">	
				<!-- <view class="agreement-view-view"> -->
				  <view class="agreement-view-title">{{deliveryRuleTextTitle}}</view>
					<scroll-view :scroll-top="0" scroll-y="true" class="scroll-rule-Y">
						<u-parse :html="deliveryRuleText"></u-parse>
					</scroll-view>
				<!-- </view> -->
				<view class="agreement-view-btn" @click="agreementShow = false">{{ $t("知道了") }}</view>
			</view>
		 </u-popup>
	</view>
</template>

<script>
	import kefu from '@/components/kefu.vue'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '',
				}, 
				agreementShow : false,
				show: false,
				num: 1,
				isBuy:true,
				id:'',
				info:'',
				kfshow:false,
				bi: 0,
				deliveryRuleText :'',
				deliveryRuleTextTitle : ''
			}
		},
		components: {
			kefu
		},
		onPageScroll(e) {
			if (e.scrollTop >= 150) {
				this.background.backgroundColor = "#fff"
			} else {
				this.background.backgroundColor = ""
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
			if (uni.getStorageSync("user")) {
				this.getBi()
			}
			this.getDeliveryRuleText()
		},
		methods: {
			hide() {
				this.kfshow = false
			},
			getDeliveryRuleText() {
				this.$http({
					url: "api/common/get_agreement",
					data: {
						name: 'delivery_rule'
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.deliveryRuleText = res.data.data.content
						this.deliveryRuleTextTitle = res.data.data.title
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			// 联系客服
			lxkefu() {
				this.$refs.child.getKf()
				this.kfshow = true
			},
			buy(){
				var data = {
					type:1,
					id:this.info.id,
					image:this.info.goodsPic,
					name:this.info.title,
					num:this.num,
					price:this.info.price,
					integral:this.info.integral,
					freight_value:this.info.freight_value,
					goods_type:this.info.goods_type
				}
				uni.setStorageSync('goods',data)
				uni.navigateTo({
					url:'/pagesB/pages/mall/confirmOrder'
				})
			},
			getBi(){
				this.$http({
					url: "api/member/get_user_info",
				}).then(res => {
					if (res.data.code == 1) {
						this.bi = res.data.data.integral
						uni.setStorageSync('user', res.data.data)
						uni.$emit('updataUser');
					}
				}).catch(err => {});
			},
			getInfo(){
				this.$http({
					url: "api/common/get_goods_info",
					data: {
						id:this.id
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.info = res.data.data
						this.info.freight_value = parseInt(res.data.data.freight_value).toFixed(2)
						this.info.goodsPic = this.info.image
					}
				}).catch(err => {});
			},
			formatRichText(html) {
				if(!html){
					return
				}
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi,
						'width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="width:100%;height:auto;display:block;"');
				return newContent;
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// 弹出层收起
			close(){
				this.num = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../../static/css/goodsInfo.css");
	.row {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		width: 100%;
	}
	
	.hui {
		display: flex;
		color: #999;
		font-size: 26rpx;
	}
	
	.row .pri {
		font-size: 34rpx;
		font-weight: bold;
	}
	.row-list{
		margin:0 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		// margin-bottom: 20rpx;
	}
	.row-list-cell{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		margin-top: 1rpx;
		margin:0 30rpx;
	}
	.row-list-cell-right{
		display: flex;
		align-items: center;
		.u-icon{
			margin-left: 16rpx;
		}
	}
	
	.agreement-view{
		width: 580rpx;
		height: 800rpx;
		background-color: #845EC2;
		border-radius: 40rpx;
		overflow: hidden;
		.agreement-view-btn{
			width: 540rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			font-size: 30rpx;
			color: #845EC2;
			height: 80rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
		}
	}
	.agreement-view-title{
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
	}
	.scroll-rule-Y{
		height: 500rpx;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin: 6rpx auto;
		color: #fff;
	}
</style>
